<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="shortcut icon" href="/asserts/images/favicon.ico" type="image/x-icon">
<meta name="referrer" content="no-referrer"/>
<link rel="stylesheet"
      href="http://dd.ddandang.top/resources/bootstrap-4.4.1-dist/bootstrap-4.4.1-dist/css/bootstrap.min.css">
<head th:replace="common/main_layout::head">
</head>
<body class="main_body">
<div class="layui-layout layui-layout-admin">
    <!--导航栏-->
    <header th:replace="~{common/main_layout::header(active='home')}"></header>
    <!--导航栏-->

    <!--网页主体-->
    <div class="padding">
        <!--滚动条旁边固定组件-->
        <div id="rocket_info">
            <div id="aboutUs"></div>
            <div id="app">
            </div>
            <div id="qrCode">
            </div>
        </div>
<!--        <div id="rocket_info">-->
<!--            <button id="find"></button>-->
<!--            <div id="qrCode"></div>-->
<!--        </div>-->
        <div style="display: none;" id="rocket-to-top">
            <div style="opacity:0;display: block;" class="level-2"></div>
            <div class="level-3"></div>
        </div>
        <!--轮播图-->
        <!--bootstrap轮播图-->
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="http://dd.ddandang.top/images/rotation/image-1.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://dd.ddandang.top/images/rotation/image-2.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://dd.ddandang.top/images/rotation/image-3.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://dd.ddandang.top/images/rotation/image-4.png" class="d-block w-100" alt="...">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <!--轮播图结束-->
        <!--主体-->

        <div class="layout-count layui-fluid">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">

                        <div class="layui-card-header layui-bg-green">
                            图书捐赠量
                        </div>
                        <div class="layui-card-body">
                            <span class="card-count" id="totalBooksNumber">999,999,999</span>
                            <span class="count-right">本</span>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header layui-bg-green">
                            衣物捐赠量
                        </div>
                        <div class="layui-card-body">
                            <span class="card-count" id="totalWeight"></span>
                            <span class="count-right">KG</span>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header layui-bg-green">
                            总捐赠人数
                        </div>
                        <div class="layui-card-body">
                            <span class="card-count" id="totalUsers"></span>
                            <span class="count-right">人</span>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header layui-bg-green">
                            总捐赠金额
                        </div>
                        <div class="layui-card-body">
                            <span class="card-count" id="totalAmount"></span>
                            <span class="count-right">元</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <div class="donation-step ">
            <div class="layui-container" id="step">
                <div id="step-header">
                    <h2>轻松捐赠 小区集中回收</h2>
                    <p>Easy donation, centralized recycle of community</p>
                </div>
                <ul class="recycle-step">
                    <li class="step-list">
                        <div class="recycle-step-img step1"></div>
                        <p>查询小区是否开通捐赠</p>
                    </li>
                    <li class="layui-icon layui-icon-right arrow"></li>
                    <li class="step-list">
                        <div class="recycle-step-img step2"></div>
                        <p>小区集中回收</p>
                    </li>
                    <li class="layui-icon layui-icon-right arrow"></li>
                    <li class="step-list">
                        <div class="recycle-step-img step3"></div>
                        <p>携带捐赠物到指定地点</p>
                    </li>
                    <li class="layui-icon layui-icon-right arrow"></li>
                    <li class="step-list">
                        <div class="recycle-step-img step4"></div>
                        <p>工作人员扫码确认捐赠获取积分</p>
                    </li>
                </ul>
            </div>
        </div>
        <br/>
        <div class="table-responsive tablebox">
            <table class="table table-bordered" id="tableId">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>衣物重量</th>
                    <th>衣物数量</th>
                    <th>书籍数量</th>
                    <th>地址</th>
                    <th>捐赠时间</th>
                </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
            <br/><br/>
        </div>
        <br/><br/>

        <div class="map-content map-branch card-body">
            <div class="map-module">
                <p class="map-title">就近找到我们</p>
                <div class="map-content-info">
                    <div class="branch-map-l">
                        <div class="map-content-box">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--新闻-->
        <div class="layout-body layui-bg-gray layui-row layui-col-space30" id="news">
            <div class="news-header">
                <h2>新芽热点公益新闻</h2>
                <p>hotspot public welfare news</p>
            </div>
        </div>

    </div>

    <!--主体结束-->
</div>

<!--页尾-->

<footer th:replace="~{common/main_layout::footer}"></footer>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script type="text/javascript"
        src="http://dd.ddandang.top/resources/bootstrap-4.4.1-dist/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>


<!--数字格式化插件-->
<script type="text/javascript" src="http://dd.ddandang.top/js/accounting.min.js"></script>
<!--汉字转拼音-->
<script type="text/javascript" src="/asserts/js/convertpinyin.js"></script>
<script type="text/javascript" src="/asserts/js/user/index.js"></script>
<script>
    let province;
    let city;
    let county;

    let qrCode = $("#qrCode");
    let app = $("#app");
    app.mouseover(function () {
        qrCode.fadeIn("slow");
    });
    app.mouseout(function () {
        qrCode.fadeOut("slow");
    });

    $('dd').filter(':nth-child(n+4)').addClass('hide');

    $('dl').on('click', 'dt', function() {
        $(this).next().slideToggle(200);
    });
</script>
</body>
</html>